<template>
  <div class="profile-container">
    <el-card class="profile-card">
      <template #header>
        <div class="card-header">
          <h3>个人中心</h3>
          <el-button type="primary" @click="handleSave">保存修改</el-button>
        </div>
      </template>

      <el-form :model="profileForm" label-width="120px" size="large">
        <!-- 头像 -->
        <el-form-item label="头像">
          <div class="avatar-container">
            <el-avatar :size="80" :src="profileForm.avatar">
              {{ authStore.user?.username?.charAt(0)?.toUpperCase() }}
            </el-avatar>
            <el-button type="primary" size="small" @click="handleAvatarUpload">
              更换头像
            </el-button>
          </div>
        </el-form-item>

        <!-- 基本信息 -->
        <el-divider content-position="left">基本信息</el-divider>
        
        <el-form-item label="用户名">
          <el-input v-model="profileForm.username" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="邮箱">
          <el-input v-model="profileForm.email" placeholder="请输入邮箱" />
        </el-form-item>

        <el-form-item label="手机号">
          <el-input v-model="profileForm.phone" placeholder="请输入手机号" />
        </el-form-item>

        <el-form-item label="个人简介">
          <el-input
            v-model="profileForm.bio"
            type="textarea"
            :rows="3"
            placeholder="请输入个人简介"
          />
        </el-form-item>

        <!-- 安全设置 -->
        <el-divider content-position="left">安全设置</el-divider>
        
        <el-form-item label="登录密码">
          <el-input
            v-model="profileForm.password"
            type="password"
            placeholder="留空则不修改密码"
            show-password
          />
        </el-form-item>

        <el-form-item label="确认密码">
          <el-input
            v-model="profileForm.confirmPassword"
            type="password"
            placeholder="请再次输入密码"
            show-password
          />
        </el-form-item>

        <!-- 通知设置 -->
        <el-divider content-position="left">通知设置</el-divider>
        
        <el-form-item label="邮件通知">
          <el-switch v-model="profileForm.emailNotifications" />
        </el-form-item>

        <el-form-item label="系统通知">
          <el-switch v-model="profileForm.systemNotifications" />
        </el-form-item>

        <el-form-item label="短信通知">
          <el-switch v-model="profileForm.smsNotifications" />
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

// 表单数据
const profileForm = reactive({
  username: '',
  email: '',
  phone: '',
  bio: '',
  avatar: '',
  password: '',
  confirmPassword: '',
  emailNotifications: true,
  systemNotifications: true,
  smsNotifications: false
})

// 处理头像上传
const handleAvatarUpload = () => {
  ElMessage.info('头像上传功能开发中...')
}

// 处理保存
const handleSave = () => {
  if (profileForm.password && profileForm.password !== profileForm.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }

  // 这里应该调用实际的保存API
  ElMessage.success('保存成功')
}

// 组件挂载时初始化数据
onMounted(() => {
  if (authStore.user) {
    profileForm.username = authStore.user.username
    profileForm.email = authStore.user.email
  }
})
</script>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.profile-card {
  border-radius: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.avatar-container {
  display: flex;
  align-items: center;
  gap: 16px;
}

.el-divider {
  margin: 24px 0;
}

.el-divider__text {
  font-size: 14px;
  font-weight: 500;
  color: #666;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    padding: 10px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .avatar-container {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .el-form-item {
    margin-bottom: 16px;
  }
  
  .el-form-item__label {
    width: 100% !important;
    text-align: left;
    margin-bottom: 8px;
  }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .profile-card {
    background: #1a1a1a;
    border-color: #333;
  }
  
  .card-header h3 {
    color: #fff;
  }
  
  .el-divider__text {
    color: #999;
  }
}
</style>
